<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/base.css">
    <link rel="stylesheet" href="../static/font/iconfont.css">
    <script src="../renderlib/vue/vue.js"></script>
    <script src="../renderlib/vue/components/btn.js"></script>
    <script src="../renderlib/vue/components/dialog.js"></script>
    <script src="../renderlib/vue/components/system-title.js"></script>
    <script src="../static/font/iconfont.js"></script>
    <script src="../renderlib/sass/render.js"></script>
    
    <script type="text/javascript">
    renderScssWrite(`<style type="text/scss">
        html, body {
            margin:0;
            padding: 0;
            width:100%;
            height: 100%;
        }
        
        .frame {
            width:100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            font-size: 13px;
        }
        
        .content {
            width:100%;
            height: 100%;
            position: relative;
            justify-content: center;
            padding:10px;
            box-sizing: border-box;
            overflow: auto;
        }
        
        .changelog {
            padding:0;
        
            h1,h2,h3,h4,h5,h6 {
                margin:0;
            }
    
             .version {
                display:flex;
                align-content: center;
                height:44px;
            }
    
             .version .text {
                padding:0 10px 0 5px;
            }
    
             .version .line {
                display: flex;
                justify-content: center;
                align-items: center;
                /*flex:1;*/
    
            }
    
             .version .line div {
                border-top:solid 1px #e7e6e6;
                padding:0 10px;
                width:30px;
            }
    
             .version .time {
                display: flex;
                align-items: center;
                padding:0 5px 0 10px;
                font-size:11px;
                color: #cd10cd;
                text-align: left;
            }
    
            ul {
                list-style: none;
                padding:0;
            }
            
            li {
                list-style: none;
            }
    
            $pointSize: 14;
            $pointSizePx: #{$pointSize}px;
            $hHeight: 44;
            $hHeightPx: #{$hHeight}px;
            
            /* 时间戳线条 */
            li.vrow {
                padding-left:20px;
                border-left:solid 1px #c9c9c9;
                margin-left:10px;
                position: relative;
                
                h1 {
                    display: flex;
                    align-items: center;
                }
                
                $hFirstHeight: 50;
                $hFirstHeightPx: #{$hFirstHeight}px;
                
                &.first {
                    .point {
                        top: calc(#{$hFirstHeightPx} / 2 - (#{$pointSizePx} / 2));
                    }
                    
                    h1 {
                        font-size: 40px;
                        height:50px;
                    }
                }
                
                .mask {
                    position: absolute;
                    z-index:9;
                    background: white;
                    height:calc(#{$hFirstHeightPx} / 2 - (#{$pointSizePx} / 2) + 1px);
                    width: $pointSizePx;
                    left:calc(-#{$pointSizePx} / 2);
                }
            }
            
            li.vrow .point {
                width: $pointSizePx;
                height: $pointSizePx;
                border-radius: 50%;
                border:solid 1px #0586c9;
                position: absolute;
                left:calc(-#{$pointSizePx} / 2);
                top: calc(#{$hHeightPx} / 2 - (#{$pointSizePx} / 2));
                background: white;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                z-index:10;
            }
    
            li.vrow .point:after {
                width:60%;
                height: 60%;
                border-radius: 50%;
                background: #0586c9;
                content:' ';
            }
    
            li.vrow .change {
                margin-top:10px;
            }
    
            li.vrow .change li.group {
                padding-bottom: 20px;
            }
    
            li.vrow .change li.group h4 {
                color:white;
                border-radius: 5px;
                padding:4px 8px;
                font-size:12px;
                display: inline-block;
            }
    
            li.vrow .change li.new h4 {
                color: #779a77;
            }
    
            li.vrow .change li.new h4:after {
                content:'新增';
            }
    
            li.vrow .change li.youhua h4 {
                color: #6d96ea;
            }
    
            li.vrow .change li.youhua h4:after {
                content:'优化';
            }
    
            li.vrow .change li.yichu h4 {
                color: #908f8f;
            }
    
            li.vrow .change li.yichu h4:after {
                content:'移除';
            }
    
    
            .items li {
                padding: 5px;
                color: #494848;
                font-size: 13px;
            }
        }

        
`);
    </script>
</head>
<body>
    <div class="frame" id="root">
        <system-title  @beforeclose="close" ></system-title>
        <div class="content">
            <style type="text/css">
                
            </style>
            <ul class="changelog">
                <li class="vrow" :class="{first:i==0}" v-for="(row, i) in versionData">
                    <div class="point"></div>
                    <div class="mask" v-if="i==0"></div>
                    <div class="version">
                        <h1 class="text">{{row.version}}</h1>
                        <div class="line"><div></div></div>
                        <div class="time">{{row.date}}</div>
                    </div>
                    <ul class="change">
                        <li class="group new" v-if="row.update.added.length">
                            <h4></h4>
                            <ul class="items">
                                <li v-for="item in row.update.added">{{item}}</li>
                            </ul>
                        </li>
                        <li class="group youhua" v-if="row.update.fixed.length">
                            <h4></h4>
                            <ul class="items">
                                <li v-for="item in row.update.fixed">{{item}}</li>
                            </ul>
                        </li>
                        <li class="group yichu" v-if="row.update.removed.length">
                            <h4></h4>
                            <ul class="items">
                                <li v-for="item in row.update.removed">{{item}}</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

<script src="./js/changelog.js"></script>
</body>
</html>
